<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>echarts使用步骤</title>
</head>

<body>
  <div style="width: 600px;height: 400px;"></div>
</body>
<script src="./echarts.min.js"></script>
<script>
  // 1.初始化echarts（写法固定）
  // let 变量=echarts.init(盒子)
  let mychart = echarts.init(document.querySelector('div'))

  // 2.配置echarts图表（配置决定了图标的样子）
  // let 配置项={}
  let option = {
    // 标题配置
    title: {
      text: '这个是第一个图表',
      show: true,
      textStyle: {
        fontSize: 32,
        color: '#165846'
      },
      subtextStyle: {
        left: 'auto',
        top: 'center'
      },
    },
    // 轴的字体
    textStyle: {
      fontSize: 24,
      color: '#225455'
    },
    // 未成功的标题位置样式
    subtextStyle: {
      left: 'auto',
      top: 'center'
    },
    // x轴
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    // y轴
    yAxis: {
      type: 'value'
    },
    // 系列数据
    series: [
      // 数组中的每一个小对象，就是一个图形

      // 第一条数据图
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        // type图像的类型 line线性 bar柱状图 pie饼型 map地图型
        type: 'line',
        name: '订单量'
      },
      // 第一条数据图
      {
        data: [250, 130, 124, 118, 235, 247, 160],
        // type图像的类型 line线性 bar柱状图 pie饼型 map地图型
        type: 'line',
        name: '销售额'
      },
      // 第二条数据图
      {
        data: [50, 30, 24, 18, 35, 47, 60],
        // type图像的类型 line线性 bar柱状图 pie饼型 map地图型
        type: 'bar',
        barWidth: '60%',//控制柱子的宽度
        name: '纯收入'
      }
    ],
    // 数据图颜色
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: 'pink' // 0% 处的颜色
      }, {
        offset: 0.6, color: 'white' // 100% 处的颜色
      }, {
        offset: 1, color: 'yellow' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    //  网格配置（坐标轴这个区域）
    grid: {
      top: 100
    },
    // 图例（用于表达每个图形的意义）
    // 需要在series每个数据里添加一个name
    legend: {
      top: 60
    },
    // 鼠标移入提示
    tooltip: {
      // 提示触发方式
      // 默认是item，鼠标放到每一项上才能提示
      // 可选axis，鼠标移动到轴上即可提示
      trigger: 'axis'
    }

  }

  // 3.根据配置项，创建图表（写法固定）
  mychart.setOption(option)//setOption 第1个O是大写
</script>

</html>